<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title>Map Example</title>
		<script type="text/javascript">
			var map = null;
			// 创建地图控件
			function createMap() {
				if (!map) {
					map = plus.maps.create('map', {
						top: '300px',
						left: '0px',
						width: '100%',
						height: '400px',
						position: 'static',
						type: "MAPTYPE_NORMAL", //MAPTYPE_NORMAL
						traffic: true,
						zoomControls: true,
						center: new plus.maps.Point(120.210, 30.245), //"120.210,30.245"
						zoom: 15
					});
					plus.webview.currentWebview().append(map);
				}
			}

			function findMap() {
				var b = plus.maps.getMapById('map');
				if (b) {
					console.log('find success!', JSON.stringify(b));
					alert(JSON.stringify(b));
				} else {
					console.log('find failed!');
					alert('failed');
				}
			}

			function calculateArea() {
				var bounds = map.getBounds();
				plus.maps.Map.calculateArea(bounds, function(event) {
					var area = event.area; // 计算后的面积值
					alert("Area:" + area);
				}, function(e) {
					alert("Failed:" + JSON.stringify(e));
				});
			}

			function calculateDistance() {
				var point1 = new plus.maps.Point(116.351442, 39.972614);
				var point2 = new plus.maps.Point(116.340788, 39.973319)
				plus.maps.Map.calculateDistance(point1, point2, function(event) {
					var distance = event.distance; // 转换后的距离值
					alert("Distance:" + distance);
				}, function(e) {
					alert("Failed:" + JSON.stringify(e));
				});

			}

			function convertCoordinates() {
				var point = new plus.maps.Point(116.3447905236, 39.9663258208);
				plus.maps.Map.convertCoordinates(point, {}, function(event) {
					var point = event.coord; // 转换后的坐标值
					var coordType = event.coordType; // 转换后的坐标系类型
					alert("Success:" + JSON.stringify(event));
				}, function(e) {
					alert("Failed:" + JSON.stringify(e));
				});
				k
			}

			function geocode() {
				plus.maps.Map.geocode("龙翔桥地铁站", {
					city: "杭州"
				}, function(event) {
					var address = event.address; // 转换后的地理位置
					var point = event.coord; // 转换后的坐标信息
					var coordType = event.coordType; // 转换后的坐标系类型
					alert("Coord:" + JSON.stringify(point));
				}, function(e) {
					alert("Failed:" + JSON.stringify(e));
				});
			}

			function reverseGeocode() {
				var point = new plus.maps.Point(120.164052, 30.254642);
				plus.maps.Map.reverseGeocode(point, {}, function(event) {
					var address = event.address; // 转换后的地理位置
					var point = event.coord; // 转换后的坐标信息
					var coordType = event.coordType; // 转换后的坐标系类型
					alert("Address:" + address);
				}, function(e) {
					alert("Failed:" + JSON.stringify(e));
				});
			}

			function addOverlay() {
				let marker = null;
				marker = new plus.maps.Marker(new plus.maps.Point(120.164052, 30.254642));
				marker.setIcon("/static/logo.png");
				marker.setLabel("wuqiaoli");
				var bubble = new plus.maps.Bubble("了解各个APi的使用");
				marker.setBubble(bubble);
				map.addOverlay(marker);
			}

			function centerAndZoom() {
				map.centerAndZoom(new plus.maps.Point(120.164052, 30.254642), 12)
			}

			function clearOverlays() {
				map.clearOverlays();
			}

			function handelClose() {
				console.log("close=>")
				map.close();
				map = null;
			}

			function getBounds() {
				alert(JSON.stringify(map.getBounds()));
			}

			function getCenter() {
				var center = map.getCenter();
				alert(JSON.stringify(center));
			}

			function getMapType() {
				alert(map.getMapType() == plus.maps.MapType.MAPTYPE_SATELLITE ? "卫星视图" : "街道视图");
			}

			function getUserLocation() {
				map.getUserLocation(function(state, point) {
					if (0 == state) {
						alert(JSON.stringify(point));
					} else {
						alert("Failed!");
					}
				});

			}

			function isTraffic() {
				map.setTraffic(true);
			}

			function resetEvent() {
				map.reset()
			}

			function setRadius() {
				console.log(66)
				var circleObj = new plus.maps.Circle(new plus.maps.Point(120.164052, 30.254642), 100);
				circleObj.setStrokeColor("#ff0000");
				map.addOverlay(circleObj);
			}

			function polyline() {
				var points = new Array(new plus.maps.Point(120.0, 30.0), new plus.maps.Point(120.1, 30.2), new plus.maps.Point(
					120.2, 30.3));
				var polylineObj = new plus.maps.Polyline(points);
				polylineObj.setStrokeColor("#ff0000");
				polylineObj.setLineWidth(10);
				map.addOverlay(polylineObj);
			}


			function polygon() {
				var points = new Array(new plus.maps.Point(120.0, 30.0), new plus.maps.Point(123.0, 31.0), new plus.maps.Point(
					120.0, 31.0));
				var polygonObj = new plus.maps.Polygon(points);
				polygonObj.setStrokeColor("#ff0000");
				map.addOverlay(polygonObj);
			}

			function search() {
				let searchObj = new plus.maps.Search(map);
				searchObj.onPoiSearchComplete = function(state, result) {
					console.log("onPoiSearchComplete: " + state + " , " + result.currentNumber);
					if (state == 0) {
						if (result.currentNumber <= 0) {
							alert("没有检索到结果");
						}
						for (var i = 0; i < result.currentNumber; i++) {
							var pos = result.getPosition(i);
							var marker = new plus.maps.Marker(pos.point);
							marker.setLabel(pos.name);
							map.addOverlay(marker);
						}
					} else {
						alert("检索失败");
					}
				}
				var pt = new plus.maps.Point(120.164052, 30.254642); // 天安门坐标
				searchObj.poiSearchNearBy("龙翔桥", pt, 1000);
			}
		</script>
		<style type="text/css">
			* {
				-webkit-user-select: none;
			}

			html,
			body {
				margin: 0px;
				padding: 0px;
				height: 100%;
			}

			button {
				font-size: 14px;
			}
		</style>
	</head>
	<body>
		<button onclick="createMap()">创建地图控件</button>
		<button onclick="findMap()">查找地图控件</button>
		<button onclick="calculateArea()">计算面积</button>
		<button onclick="calculateDistance()">计算距离</button>
		<button onclick="convertCoordinates()">坐标转换</button>
		<button onclick="geocode()">地理编码</button>
		<button onclick="reverseGeocode()">反向地理编码</button>
		<button onclick="addOverlay()">向地图中添加覆盖物</button>
		<button onclick="centerAndZoom()">设置地图初始中心点和缩放级别</button>
		<button onclick="clearOverlays()">清除地图中所有覆盖物对象</button>
		<button onclick="handelClose()">关闭地图控件</button>
		<button onclick="getBounds()">获取当前地图可视范围的地理区域</button>
		<button onclick="getCenter()">获取地图中心点位置</button>
		<button onclick="getMapType()">获取地图的显示类型</button>
		<button onclick="getUserLocation()">获取用户的当前位置信息</button>
		<button onclick="isTraffic()">获取是否打开地图交通信息图层</button>
		<button onclick="resetEvent()">重置地图</button>
		<button onclick="setRadius()">设置圆圈的半径</button>
		<button onclick="polyline()">创建Polyline对象</button>
		<button onclick="polygon()">地图上显示的多边形对象</button>
		<button onclick="search()">地图检索对象</button>
	</body>
</html>
